<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 查询节点 -->
    <div id="app">
        hello world
        <p>test1</p>
        <p>test2</p>
        <p>test3</p>
        <p>test4</p>
    </div>
    <script>
        var app = document.getElementById("app");
        var id =app.getAttributeNode("id");
        var child = app.childNodes;//获取所有子元素节点包括回车
        var children = app.children;//获取所有子节点
        console.log(app.nodeType)
        console.log(app.firstChild.nodeType)
        console.log(id.nodeType)
        console.log(child) //9个（文本，p标签，文本（回车），p标签，文本，p标签，文本，p标签，文本）
        console.log(children)
    </script>


    <!-- 增加节点 -->
    <div id="app-two"></div>
    <script>
        var appTwo = document.getElementById("app-two");
        var pTwo = document.createElement("p");
        var txt = document.createTextNode("hello world");
        pTwo.appendChild(txt)
        appTwo.appendChild(pTwo)
    </script>


    <!-- 插入节点 -->
    <ul id="app-three">
        <li>html</li>
        <li id="js-three">JAVASCRIP</li>
    </ul>
    <script>
        var appThree = document.getElementById("app-three");
        var jsThree = document.getElementById("js-three");
        var liThree = document.createElement("li");//创造标签li
        liThree.innerHTML = "vue";//给标签添加文本
        appThree.insertBefore(liThree,jsThree)//将标签插入到js前面
    </script>


    <!-- 删除节点 -->
    <div id="app-four">
        <div id="child-four"></div>
    </div>
    <script>
        var appFour = document.getElementById("app-four");
        var childFour = document.getElementById("child-four");
        appFour.removeChild(childFour)
    </script>


    <!-- 改变节点 -->
    <div id="app-five">
        <div id="child-five"></div>
    </div>
    <script>
        var app = document.getElementById("app-five");
        var childFive = document.getElementById("child-five");
        var pFive = document.createElement("p");
        pFive.innerHTML = "hello world";
        app.replaceChild(pFive,childFive)
    </script>


    <!-- 克隆节点 -->
    <div id="app-six">
        <div id="child-six">克隆</div>
    </div>
    <script>
        var app = document.getElementById("app-six");
        var childSix = document.getElementById("child-six");
        var pSix = childSix.cloneNode(true);
        app.appendChild(pSix)
    </script>
</body>
</html>